<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Add Products</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
	<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<script>
		$(document).ready(function() {
			$("button").click(function() {
				var productmodel = {
					id : "3",
					name : "Ginger"
				};
				var requestJSON = JSON.stringify(productmodel);
				$.ajax({
					type : "POST",
					url : "http://localhost:8071/products",
					headers : {
						"Content-Type" : "application/json"
					},
					data : requestJSON,
					success : function(data) {
						$("#productsJson").append(data);
						$("#productsJson").show();
					},
					error : function(data) {
					}
				});
			});
		});
	</script>
</head>
<body>
<div class="container">
	<h4>Add Products</h4>
	<div><p id = "productsJson" class="bg-info" style="padding: 15px;display: none;"></p></div>
	<a class="btn btn-default" th:href="@{/}" role="button">Index</a>
	<a class="btn btn-default" th:href="@{/view-products}" role="button">View Products</a>
	<button class="btn btn-default" type="submit">Click here to submit the form</button>
</div>
</body>
</html>